<template>
	<view class="bar-style">
		<view v-for="(item,index) in changeHistoryList" :key="index" style="display: flex;">
			<!--
			    author: 陈炎
			    description: 
				根据index的奇偶来判断显示时间或信息在左侧还是右侧
				根据index的奇偶来判断左右侧空白哪个显示，哪个不显示
			-->
			<view style="width: 200rpx;height: 100rpx;" v-if="index%2===0"></view>
			<view class="proccess-note" v-if="index%2!==0">
				<view class="note-content">{{item.time}}</view>
			</view>
			<canvas class="canvas-style" :canvas-id="item.type" :id="item.type"></canvas>
			<view class="proccess-note" v-if="index%2===0">
				<view class="note-content">{{item.time}}</view>
			</view>
			<view style="width: 200rpx;height: 100rpx;" v-if="index%2!==0"></view>
		</view>
	</view>
</template>

<script>
	/**
	 * author: 陈炎
	 * description: 用于显示合同更改历史记录
	 * changeHistoryList为更变记录对象列表
	 * time表示对应里程点的 注解时间 或 信息
	 * type总共有四种startCanvas,firstCanvas,middleCanvas,lastCanvas
	 * 		startCanvas表示仅有一条记录时，单个里程点的样式
	 * 		firstCanvas表示有两条及以上记录时，首个里程点 的样式
	 * 		middleCanvas表示有三条及以上记录时，中间里程点 的样式
	 * 		lastCanvas表示有两条及以上记录时，最后一个里程点 的样式
	 * 示例
	 * changeHistoryList:[
			{'type':'firstCanvas','time':'2021年01月01日'},
			{'type':'middleCanvas','time':'2020年02月02日'},
			{'type':'lastCanvas','time':'2020年05月05日'}
		]
	 */
	export default{
		props: {
			changeHistoryList: {
				type: Array,
				default: ''
			},
		},
		mounted() {
			let first = uni.createCanvasContext('firstCanvas')
			let middle = uni.createCanvasContext('middleCanvas')
			let last = uni.createCanvasContext('lastCanvas')
			let start = uni.createCanvasContext('startCanvas')
			let device=uni.getSystemInfo();
			var screenWid;
			uni.getSystemInfo({
				success:function(res){
					screenWid = res.windowWidth
				}
			})
			let wid = screenWid/375;
			first.arc(25*wid, 25*wid, 3*wid, 0, 5*wid* Math.PI, false)
			first.setFillStyle("#808080")
			first.fill()
			first.moveTo(25*wid,50*wid)
			first.lineTo(25*wid,25*wid)
			first.lineWidth = 1
			first.setStrokeStyle("#808080")
			first.stroke()
			first.draw()
			middle.arc(25*wid, 25*wid, 3*wid, 0, 5*wid* Math.PI, false)
			middle.setFillStyle("#808080")
			middle.fill()
			middle.moveTo(25*wid,0)
			middle.lineTo(25*wid,50*wid)
			middle.lineWidth = 1
			middle.setStrokeStyle("#808080")
			middle.stroke()
			middle.draw()
			last.arc(25*wid, 25*wid, 3*wid, 0, 5*wid* Math.PI, false)
			last.setFillStyle("#808080")
			last.fill()
			last.moveTo(25*wid,25*wid)
			last.lineTo(25*wid,0)
			last.lineWidth = 1
			last.setStrokeStyle("#808080")
			last.stroke()
			last.draw()
			start.arc(25*wid, 25*wid, 3*wid, 0, 5*wid* Math.PI, false)
			start.setFillStyle("#808080")
			start.fill()
			start.setStrokeStyle("#808080")
			start.stroke()
			start.draw()
		}
	}
</script>

<style>
	.bar-style{
		margin: 0 0 30rpx 25rpx;
	}
	.canvas-style{
		width: 100rpx; 
		height: 100rpx;
	}
	.proccess-note{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 200rpx;
		height: 100rpx;
	}
	.note-content{
		font-size: 20rpx;
	}
</style>
